Fix mobile overflow and soft-wrapping issues on documentation pages #424
Conversation
Fixed mobile layout overflow and soft-wrapping issues on documentation pages by constraining content within a container and improving responsive CSS. Added padding and safe-area support for small screens, prevented grid and media overflow, and ensured long text wraps correctly. Verified locally on a mobile-sized viewport with horizontal scrolling eliminated.
static/css/main.css
Outdated
| padding-top: 56.25%; | ||
| /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ |
There was a problem hiding this comment.
what is the point of this change
|
Thanks. Why is |
Thanks for pointing this out. rendered_build.html is a static snapshot of the final HTML generated by Hugo for the /doc/build/ page. I used it locally to inspect the fully rendered output (i.e., the combined result of baseof.html, single.html, and the markdown content) to verify that the .container wrapping was being applied correctly. Since this file is only useful for local debugging and isn’t part of the source workflow, it shouldn’t be included in the commit. I’ll remove it from the PR. Regarding static/css/main.css, acknowledged. I won’t remove the trailing EOL and will ensure it’s preserved in the next update. I’ll push a cleaned-up revision shortly. |
static/css/main.css
Outdated
| } | ||
|
|
||
| /* Ensure that the hover border is sized correctly for <a><img…></a>. #295 */ | ||
| /* Ensure that the hover border is sized correctly for <a><img…></a>. #295 */ |
static/css/main.css
Outdated
| --fg-color: #a9d5c4; | ||
| --inverse-fg-color: #29332f; /* Light-mode fg color. */ | ||
| --inverse-fg-color: #29332f; | ||
| /* Light-mode fg color. */ |
There was a problem hiding this comment.
I’ve reverted the change and made the same update for the remaining cases.
Please have another look.
Removed duplicate rendering of .Content in single.html.
2 participants
Fixed mobile layout overflow and soft-wrapping issues on documentation pages by constraining content within a container and improving responsive CSS. Added padding and safe-area support for small screens, prevented grid and media overflow, and ensured long text wraps correctly. Verified locally on a mobile-sized viewport with horizontal scrolling eliminated.